﻿
@{
    ViewBag.Title = "编辑用户";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
@model IOA.MES.DataAccess.VModel.VUser

@section Contents{
    <style>
        html {
            background-color: #FFF;
        }

        .layui-form-item .layui-input-inline {
            width: 300px;
        }

        .red {
            color: red;
        }

        .roles {
            display: table;
        }

        .roleitem {
            float: left;
            background-color: #FAFAFA;
            border: 1px solid #F6F6F6;
            padding: 5px 10px;
            margin: 0 10px 10px 0;
        }

            .roleitem .layui-icon-delete {
                color: red;
                margin-left: 5px;
            }
    </style>
}

<div id="page"></div>

<template id="tplPage">
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" style="padding: 20px 30px;">
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="red">*</span>{{lang.Field.UserName}}：</label>
            <div class="layui-input-inline">
                <input type="text" v-if="user.PkId<=0" lay-verify="required" v-model="user.UserName" placeholder="请输入登录名" autocomplete="off" class="layui-input">
                <input type="text" v-if="user.PkId>0" lay-verify="required" v-model="user.UserName" placeholder="请输入登录名" disabled autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="red">*</span>{{lang.Field.TrueName}}：</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" v-model="user.TrueName" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{{lang.Field.Email}}：</label>
            <div class="layui-input-inline">
                <input type="text" v-model="user.Email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{{lang.Field.Mobile}}：</label>
            <div class="layui-input-inline">
                <input type="text" v-model="user.Phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="red">*</span>{{lang.Field.Role}}：</label>
            <div class="layui-input-inline">
                <select id="selRoles" lay-filter="selRoles">
                    @foreach (var item in ViewBag.Roles as List<IOA.MES.DataAccess.VModel.VRole>)
                    {
            <option value="@item.PkId">@item.RoleName</option>
}
                </select>
            </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline roles">
            <div class="roleitem" v-for="item in user.Roles">{{item.RoleName}}<i class="layui-icon layui-icon-delete" @@click="removeRole(item)"></i></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="red">*</span>{{lang.Field.WorkShop}}：</label>
        <div class="layui-input-inline">
            <select id="selWorkshops" lay-filter="selWorkshops">
                @foreach (var item in ViewBag.Workshops as List<IOA.MES.DataAccess.VModel.VWorkshop>)
                {
        <option value="@item.WorkshopCode">@item.WorkshopName</option>
}
            </select>
            
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline roles">
            <div class="roleitem" v-for="item in user.Workshops">{{item.WorkshopName}}<i class="layui-icon layui-icon-delete" @@click="removeWorkshop(item)"></i></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="red">*</span> {{lang.Field.PassingPermission}}：</label>
        <div class="layui-input-inline">
            <select id="selSites" lay-filter="selSites">
                @foreach (var item in ViewBag.Sites as List<KeyValuePair<IOA.MES.DataAccess.Enum.MachineType, string>>)
                {
    <option value="@((int)item.Key)">@item.Value</option>}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline roles">
            <div class="roleitem" v-for="item in user.Sites">{{item.Value}}<i class="layui-icon layui-icon-delete" @@click="removeSite(item)"></i></div>
        </div>
    </div>
    <div class="layui-form-item" style="text-align:center;padding-top: 20px;">
        <input type="hidden" name="PkId" v-model="user.PkId">
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submit"><i class="layui-icon">&#xe605;</i>{{lang.Field.Submit}}</button>
        @* <button class="layui-btn layui-btn-primary" onclick="parent.layer.close(parent.layer.getFrameIndex(window.name));"><i class="layui-icon">&#xe616;</i>{{lang.Field.Cancel}}</button>*@
    </div>
    </div>
</template>


@section Scripts{
    <script>
        var vm = new Vue({
            el: "#page",
            template: "#tplPage",
            data: {
                lang: JSON.parse(lang).package,
                user: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(@Model))
            }
        });

        setTimeout(function () {
            initLayui();
        }, 50);

        function initLayui() {
            layui.use(['form', 'layer', 'index'], function () {
                var layer = layui.layer,
                    form = layui.form;
                form.on('select(selRoles)', function (data) {
                    var exist = vm.$data.user.Roles.find(function (e) {
                        return e.PkId == parseInt(data.value);
                    });
                    if (!exist) {
                        vm.$data.user.Roles.push({
                            PkId: parseInt(data.value),
                            RoleName: data.elem.selectedOptions[0].text
                        });
                    }
                });
                form.on('select(selWorkshops)', function (data) {
                    var exist = vm.$data.user.Workshops.find(function (e) {
                        return e.WorkshopCode == data.value;
                    });
                    if (!exist) {
                        vm.$data.user.Workshops.push({
                            WorkshopCode: data.value,
                            WorkshopName: data.elem.selectedOptions[0].text
                        });
                    }
                });
                form.on('select(selSites)', function (data) {
                    var exist = vm.$data.user.Sites.find(function (e) {
                        return e.Key == parseInt(data.value);
                    });
                    if (!exist) {
                        vm.$data.user.Sites.push({
                            Key: parseInt(data.value),
                            Value: data.elem.selectedOptions[0].text
                        });
                    }
                });

                form.on('submit(submit)', function (data) {
                    var user = vm.$data.user;
                    if (user.Roles.length <= 0) {
                        layer.msg("请选择用户岗位", { icon: 5 });
                        return;
                    }
                    var machineTypes = new Array();
                    for (var i = 0; i < user.Sites.length; i++) {
                        machineTypes.push(user.Sites[i].Key);
                    }
                    var loadId = layer.load();
                    $.ajax({
                        url: "/Settings/EditUser",
                        data: {
                            model: user,
                            machineTypes: machineTypes
                        },
                        complete: function () {
                            layer.close(loadId);
                        },
                        success: function (res) {
                            if (res.ErrCode != 200) {
                                layer.msg(res.ErrMsg, { icon: 5 });
                                return;
                            }
                            layer.msg("保存成功！", { icon: 6, time: 1500 }, function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                            });
                        }
                    });
                    return false;
                });
            });
        }

        function removeRole(item) {
            for (var i = 0; i < vm.$data.user.Roles.length; i++) {
                if (vm.$data.user.Roles[i].PkId == item.PkId) {
                    vm.$data.user.Roles.splice(i, 1);
                    break;
                }
            }
        }
        function removeWorkshop(item) {
            for (var i = 0; i < vm.$data.user.Workshops.length; i++) {
                if (vm.$data.user.Workshops[i].PkId == item.PkId) {
                    vm.$data.user.Workshops.splice(i, 1);
                    break;
                }
            }
        }
        function removeSite(item) {
            for (var i = 0; i < vm.$data.user.Sites.length; i++) {
                if (vm.$data.user.Sites[i].Key == item.Key) {
                    vm.$data.user.Sites.splice(i, 1);
                    break;
                }
            }
        }
    </script>
}
